<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="LinkContent">
      <div class="left">
        <el-form
          :model="dataForm"
          :rules="dataRule"
          ref="dataForm"
          :label-width="$i18n.locale === 'en-US' ? '120px' : '120px'"
        >
          <el-row :gutter="30" class="detailInfo">
            <el-col :span="24" v-if="!payType">
              <el-form-item label="酒店类型" prop="pay_type">
                <el-radio-group v-model="dataForm.pay_type">
                  <el-radio :label="1">预付</el-radio>
                  <el-radio :label="2">现付</el-radio>
                </el-radio-group>
                <el-button
                  type="primary"
                  size="small"
                  @click="getInfo()"
                  style="margin-left: 30px"
                  v-if="$hasPermission('channel:ctrip:roomQuery')"
                  >房型信息查询</el-button
                >
              </el-form-item>
            </el-col>
            <template v-else>
              <el-col :span="12" class="li">
                <span>售卖房型ID:</span><span>{{ detailInfo.xc_room_id }}</span>
              </el-col>
              <el-col :span="12" class="li">
                <span>售卖房型名称:</span
                ><span>{{ detailInfo.xc_room_name }}</span>
              </el-col>
              <el-col :span="12" class="li">
                <span>最大入住人数:</span
                ><span>{{ detailInfo.max_occupants_num }}</span>
              </el-col>
              <el-col :span="12" class="li">
                <span>最大入住成人数:</span
                ><span>{{ detailInfo.max_occupants_adult_num }}</span>
              </el-col>
              <el-col :span="12" class="li">
                <span>房型状态:</span
                ><span>{{ types[detailInfo.status] }}</span>
              </el-col>
              <el-col :span="12">
                <el-button  @click="dataFormSubmitHandle(2)" size="mini" type="danger" style="margin-top:5px"
                  >解除关联
                </el-button>
              </el-col>
            </template>
          </el-row>
        </el-form>
      </div>
      <div class="right" v-if="!payType">
        <div class="li" v-for="(item, index) in roomInfos" :key="index">
          <el-radio
            style="margin-left: -26px"
            v-model="dataForm.xcRoomInfoId"
            :label="item.xc_room_id"
            ><span
              style="color
              #000"
              >售卖房型ID:</span
            >{{ item.xc_room_id }}</el-radio
          >
          <el-row>
            <!-- <el-col :span="12">
                  <span>售卖房型ID:</span><span>{{ item.xc_room_id }}</span>
                </el-col> -->
            <el-col :span="12">
              <span>售卖房型名称:</span><span>{{ item.xc_room_name }}</span>
            </el-col>
            <el-col :span="12">
              <span>最大入住人数:</span
              ><span>{{ item.max_occupants_num }}</span>
            </el-col>
            <el-col :span="12">
              <span>最大入住成人数:</span
              ><span>{{ item.max_occupants_adult_num }}</span>
            </el-col>
            <el-col :span="12">
              <span>房型状态:</span><span>{{ types[item.status] }}</span>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div class="btn" v-if="!payType">
      <el-button @click="visible = false"> {{ $t("cancel") }}</el-button>
      <el-button type="primary" @click="dataFormSubmitHandle(1)" v-if="$hasPermission('channel:ctrip:roomMapping')"
        >立即关联
      </el-button>
    </div>
  </el-card>
</template>
<script>
export default {
  data() {
    return {
      visible: false,
      dataForm: {
        xcRoomInfoId: "",
        ms_hotel_id: "",
        pay_type: "",
        ms_room_id: "",
        ms_room_name: "",
      },
      roomInfos: [],
      types: {
        1: "显示",
        2: "隐藏",
        3: "废弃",
      },
      form: [],
      payType: "",
      detailInfo: {},
    };
  },
  computed: {
    dataRule() {
      return {
        pay_type: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
      };
    },
  },
  mounted() {
    this.dataForm.ms_hotel_id = this.$route.query.ms_hotel_id;
    this.dataForm.ms_room_name = this.$route.query.ms_room_name;
    this.dataForm.ms_room_id = this.$route.query.ms_room_id;
    this.payType = this.$route.query.payType;
    if (this.payType) {
      this.getDetail();
    }
  },
  watch: {
    "dataForm.xcRoomInfoId"(newval, oldval) {
      this.form = this.roomInfos.filter((item) => item.xc_room_id == newval);
      console.log(this.form);
    },
  },
  methods: {
    init() {
      this.visible = true;
    },
    getDetail() {
      this.$http("/hotel/house/base/" + this.dataForm.ms_room_id).then(
        (res) => {
          console.log(res);
          if (res.data.code == 0) {
            this.form[0]=res.data.data.xcRoomInfo;
            this.dataForm.pay_type=res.data.data.payType;
            this.detailInfo = res.data.data.xcRoomInfo;
          }
        }
      );
    },
    getInfo() {
      this.$refs["dataForm"].validate((valid) => {
        if (!valid) {
          return false;
        }
      });
      this.$http
        .post("/hotel/channel/ctrip/roomQuery", {
          mapping_type: 1,
          ms_hotel_id: this.dataForm.ms_hotel_id,
          pay_type: this.dataForm.pay_type,
        })
        .then((res) => {
          if (res.data.code == 0) {
            this.roomInfos = res.data.data;
          }
        });
    },
    dataFormSubmitHandle(type) {
      let sn = {
        xcRoomInfo: this.form[0],
        set_type: type,
        ms_room_name: this.dataForm.ms_room_name,
        ms_room_id: this.dataForm.ms_room_id,
        ms_hotel_id: this.dataForm.ms_hotel_id,
        pay_type: this.dataForm.pay_type,
      };
      this.$http.post("/hotel/channel/ctrip/roomMapping", sn).then((res) => {
        if (res.data.code !== 0) {
          this.flag = false;
          return this.$message.error(res.msg);
        }
        this.$message({
          message: this.$t("prompt.success"),
          type: "success",
          duration: 500,
          onClose: () => {
            if(type==1){
               this.payType = 1;
            this.getDetail();
            }else{
              this.payType=null;
            }
           
          },
        });
      });
    },
  },
};
</script>
<style scoped lang="scss">
.el-card__body {
  height: calc(calc(100vh - 50px - 38px - 30px) - 2px);
}
.radio {
  position: absolute;
  top: 45%;
  left: 0;
}
.btn {
  position: absolute;
  bottom: 20px;
  width: 100%;
  height: 60px;
  background-color: #fff;
  text-align: right;
  box-sizing: border-box;
  right: 40px;
}
.detailInfo {
  .li {
    position: relative;
    line-height: 40px;
    padding-left: 30px;
    span {
      &:last-child {
        color: #666;
      }
    }
  }
}
.LinkContent {
  display: flex;
  height: 100%;
  .left {
    width: 40%;
    max-width: 40%;
  }
  .right {
    width: 60%;
    padding: 20px;
    border-left: 2px solid #f3f3f3;
    height: 90%;
    overflow: auto;
    .li {
      position: relative;
      line-height: 30px;
      padding-left: 30px;
      border-bottom: 1px solid #f3f3f3;
      span {
        &:last-child {
          color: #666;
        }
      }
    }
  }
}
</style>